<template>
  <scroll-view :scroll-top="scrollTop" :scroll-y="scrollY" :scroll-x="scrollX"
    :class="{'scroll-Y':scrollY,'scroll-box':scrollX}" @scrolltolower="lower" @scroll="scroll">
    <slot></slot>
  </scroll-view>
</template>

<script>
  export default {
    name: "my-scroll-view",
    props: {
      scrollTop: {
        type: Number,
        default: 0
      },
      scrollY: {
        type: Boolean,
        default: false
      },
      scrollX: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {

      };
    },
    methods: {
      lower(e) {
        this.$emit('lower', e)
      },
      scroll(e) {
        this.$emit('scroll', e)
        // console.log(e)
        // this.old.scrollTop = e.detail.scrollTop
      },
    }
  }
</script>

<style scoped lang="scss">
  .scroll-Y {
    height: 100vh;
  }

  .scroll-box {
    white-space: nowrap;
    width: 100%;
  }
</style>
